<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no" />

<title>轻音乐</title>
 <link href="css/yiny.css" rel="stylesheet" />
 <script src="js/main.js"></script>
</head>
<body>
<div id="main">
	<!--导航-->
	<div class="nav" id="nav">
		<ul>
			<li>我的</li>
			<li>推荐</li>
			<li>MV</li>
		</ul>
	</div>
	
	<div class="my_left" id="listContent" >
		<!--滑动-->
		<div class="my_left_animate">
			
				<!--我的音乐-->
				<div class="my_music my_top_animate">
					
					
					<div class="my_name">
						<dl class="clear">
							<dt>
								<img src="img/defaultImg.png" />
							</dt>
							<dd>
								点击登录或者注册
							</dd>
							 
						</dl>
					</div>
					
					<p class="my_tit">我的音乐</p>
					
					<ul class="my_gedan">
						<li class="my_bendi" text="本地歌曲">
							<dl class="clear">
								<dt><img src="img/my_bendi.jpg" /></dt>
								<dd>本地歌曲
									<p>85首歌曲</p>
								</dd>
							</dl>
						</li>
						<!--
						<li>
							<dl class="clear">
								<dt><img src="img/my_down.jpg" /></dt>
								<dd>我的下载
									<p>85首歌曲</p>
								</dd>
							</dl>
						</li>
						-->
					</ul>
					
					<p class="my_tit">我的列表</p>
					
					<ul class="my_gedan">
						<li class="my_zaixian" text="默认列表">
							<dl class="clear">
								<dt><img src="img/my_lists.jpg" /></dt>
								<dd>默认列表
									<p>85首歌曲</p>
								</dd>
							</dl>
						</li>
						<li>
							<dl class="clear">
								<dt><img src="img/my_zuijin.jpg" /></dt>
								<dd>最近播放
									<p>85首歌曲</p>
								</dd>
							</dl>
						</li>
						<li>
							<dl class="clear">
								<dt><img src="img/my_love.jpg" /></dt>
								<dd>我喜欢听
									<p>0首歌曲</p>
								</dd>
							</dl>
						</li>
					</ul>
					
				</div>
			
				<!--在线音乐-->
				<div  class="my_wifi_music my_top_animate">
					
					<div class="my_lunb" id="my_lunb">
						<div class="my_lunb_yd">
							<img src="img/1.jpg" />
							<img src="img/2.jpg" />
							<img src="img/3.jpg" />
							<img src="img/4.jpg" />
						</div>
						 
					</div>
					
					<div class="my_pdg clear">
						
						<img src="img/p.png" id="musiccount"/>
						<img src="img/d.png" />
						<img src="img/g.png" id="author" />
					</div>
					
					<p class="my_tit">今日推荐</p>
					
					<div class="my_tuijian">
						<dl class="clear">
							<dt>
								<img src="img/hongchenkezhan.jpg" />
							</dt>
							<dd>
								<h3>8月25号最新歌曲</h3>
								<p>实力女歌手。。。。。。</p>
							</dd>
						</dl>
						<dl class="clear">
							<dt>
								<img src="img/hongchenkezhan.jpg" />
							</dt>
							<dd>
								<h3>8月25号最新歌曲</h3>
								<p>实力女歌手。。。。。。</p>
							</dd>
						</dl>
						<dl class="clear">
							<dt>
								<img src="img/hongchenkezhan.jpg" />
							</dt>
							<dd>
								<h3>8月25号最新歌曲</h3>
								<p>实力女歌手。。。。。。</p>
							</dd>
						</dl>
						<dl class="clear">
							<dt>
								<img src="img/hongchenkezhan.jpg" />
							</dt>
							<dd>
								<h3>8月25号最新歌曲</h3>
								<p>实力女歌手。。。。。。</p>
							</dd>
						</dl>
						<dl class="clear">
							<dt>
								<img src="img/hongchenkezhan.jpg" />
							</dt>
							<dd>
								<h3>8月25号最新歌曲</h3>
								<p>实力女歌手。。。。。。</p>
							</dd>
						</dl>
						<dl class="clear">
							<dt>
								<img src="img/hongchenkezhan.jpg" />
							</dt>
							<dd>
								<h3>8月25号最新歌曲</h3>
								<p>实力女歌手。。。。。。</p>
							</dd>
						</dl>
						<dl class="clear">
							<dt>
								<img src="img/hongchenkezhan.jpg" />
							</dt>
							<dd>
								<h3>8月25号最新歌曲</h3>
								<p>实力女歌手。。。。。。</p>
							</dd>
						</dl>
					</div>
					
				</div>
				
			
		</div>
	</div>	
 
	
	<!--播放列表-->
			<div class="my_play_list">
				<div id="listTitle" class="list_title"><span></span><h3>轻音乐</h3></div>
				<div id="listdl"></div>
				<div  class="list_content">
					<ul class="my_top_animate" id="listContentUl" style="transform: translate3d(0px, 0px, 0px); ">
						
					</ul>
				</div>				
			</div>
 <!--排行榜-->
	<div class="my_play_phb">
			<div class="list_title"><span></span><h3>排行榜</h3></div>
			<div  class="list_content">
				<ul class="my_top_animate" style="transform: translate3d(0px, 0px, 0px); ">
						
				</ul>
			</div>				
	</div>
	
	<!--提示框-->
	<div id="tishi"></div>
	
	<!--播放器-->
	<div class="list_audio">
					<div class="list_audio1">
						<img class="list_audioImg" src="img/defaultImg.png">
						<div class="list_audioText">
							<h3 class="title">暂无播放记录</h3>
							<p class="name">音乐播放器</p>
						</div>
					</div>	
					<div class="list_audioBtn"></div>
	</div>
	
	<!---歌词详情-->
	<div id="musicDetails" style="transform: translate3d(0px, 0px, 0px); ">
		<!--歌手写真-->
		<div class="musiXieZhen">
			<img src="img/i1.jpeg" />
			<img src="img/i2.jpeg" />
			<img src="img/i3.jpg" />
			<img src="img/i4.jpg" />
		</div>
    	<div id="detailsTitle" class="details_title">
        	<div id="detailsName" class="details_GeName">
				<h3></h3>
				<p></p>
			</div>
            <span class="details_tip"></span>
        </div>
		

		<ul class="details_kj">
			<li class="details_xz">写真</li>
		</ul>
	
		
		<!--歌词-->
        <div class="details_lyric">
					<ul id="detailsLyricUl">
						 
					</ul>
		</div>
  
        <div class="details_audio">
        	<div class="details_audioAll">
            	<div class="details_audioPro">
                	<div id="detailsAudioProUp" class="details_audioProUp"></div>
                    <div id="detailsAudioProBar" class="details_audioProBar"></div>
                </div>
                <div id="detailsNowTime" class="details_nowTime">00:00</div>
                <div id="detailsAllTime" class="details_allTime">00:00</div>
                <div id="detailsPlay" class="details_playz"></div>
                <div id="detailsPrev" class="details_prev"></div>
                <div id="detailsNext" class="details_next"></div>
            </div>
			 
        </div>
 
    </div>
</div>
<audio id="audio1" src=""></audio>
</body>
</html>
